<template>
  <div class="medical-institutions">
    <div class="header-operations">
      <el-button type="primary" @click="handleAdd">新增机构</el-button>
    </div>

    <el-table :data="institutionsList" border style="width: 100%">
      <el-table-column prop="institutionId" label="ID" width="80" />
      <el-table-column prop="institutionName" label="机构名称" />
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="contactPhone" label="联系电话" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增对话框 -->
    <el-dialog v-model="dialogVisible" title="新增医疗机构" width="500px">
      <el-form ref="formRef" :model="formData" label-width="100px">
        <el-form-item label="机构名称" prop="institutionName">
          <el-input v-model="formData.institutionName" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formData.address" />
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="formData.contactPhone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { queryAll, add, deleteById } from '@/api/medicalInstitutions'

interface Institution {
  institutionId: number
  institutionName: string
  address: string
  contactPhone: string
}

const institutionsList = ref<Institution[]>([])
const dialogVisible = ref(false)
const formData = ref({
  institutionName: '',
  address: '',
  contactPhone: ''
})

// 获取所有机构列表
const getInstitutionsList = async () => {
  try {
    const res = await queryAll()
    institutionsList.value = res.data
  } catch (error) {
    console.error('获取机构列表失败:', error)
    ElMessage.error('获取机构列表失败')
  }
}

// 新增机构
const handleAdd = () => {
  formData.value = {
    institutionName: '',
    address: '',
    contactPhone: ''
  }
  dialogVisible.value = true
}

// 提交表单
const submitForm = async () => {
  try {
    await add(formData.value)
    ElMessage.success('添加成功')
    dialogVisible.value = false
    getInstitutionsList()
  } catch (error) {
    console.error('添加失败:', error)
    ElMessage.error('添加失败')
  }
}

// 删除机构
const handleDelete = async (row: Institution) => {
  try {
    await ElMessageBox.confirm('确认删除该机构吗？', '提示', {
      type: 'warning'
    })
    await deleteById(row.institutionId)
    ElMessage.success('删除成功')
    getInstitutionsList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

onMounted(() => {
  getInstitutionsList()
})
</script>

<style lang="scss" scoped>
.medical-institutions {
  padding: 20px;

  .header-operations {
    margin-bottom: 20px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
